<template>
  <div class="recycle-bin">
    <uni-nav-bar fixed="true" title="回收站" statusBar="true" :border="false" left-icon="left"
      @clickLeft="back"></uni-nav-bar>
    <!-- 当回收站是空时 -->
    <div class="default-content" v-if="deletedQuestionnaireList.length === 0">
      <image class="garbage-bin-img" src="/static/images/recycle-bin/garbage-bin.svg" />
      <text class="characters">
        回收站是空的，快去<text class="emphasize" @click="navigateTo('survey')">创建问卷</text>分享给新人吧～
      </text>
    </div>
    <!-- 当回收站不是空时 -->
    <!-- 被删除的问卷 -->
    <div class="deleted-questionnaire-list" v-else>
      <questionnaire-card v-for="questionnaire in deletedQuestionnaireList" :key="questionnaire.id" type="deleted"
        :title="questionnaire.title" create-time="23" :id="questionnaire.id">
      </questionnaire-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import { storeToRefs } from "pinia";

import { back, navigateTo } from "@/utils/navigate";
import QuestionnaireCard from '@/components/questionnaire-card.vue';
import { useQuestionnaireList } from '@/stores/questionnaire-list';
import { onReachBottom } from '@dcloudio/uni-app';

const questionnaireList = useQuestionnaireList()

const { deletedQuestionnaireList } = storeToRefs(questionnaireList)

onMounted(() => {
  questionnaireList.getQuestionnaireList('deleted')
})

// 触底时加载更多
onReachBottom(() => {
  questionnaireList.getQuestionnaireList('deleted')
})


</script>

<style lang="scss" scoped>
.recycle-bin {
  width: 100%;
  min-height: 100vh;

  position: relative;

  // 默认显示（当没有问卷时）
  .default-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .garbage-bin-img {
      width: 192px;
      height: 192px;
    }

    .characters {
      margin-top: 62px;
      font-size: 3.8462vw;
      color: #333;
    }
  }

  // 被删除的问卷列表
  .deleted-questionnaire-list {
    margin-top: 16px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 20px;
    justify-items: center;

  }


}
</style>
